<template>
  <div class="dynamic-desc-wrapper">

    <scroll v-if="dynamic" class="main"
      :data="commentList"
      ref="wrapperScroll"
      :bounce="false"
      :probeType="3"
      :listenScroll="true"
      @scroll="scrollWrapper"
      :style="{height: 'calc(100% - ' + 'px)'}"
      v-cloak>
      <div class="imgWrapper"  @click="previewImg(dynamic.atlas, 0)">
        <img ref="topImg" v-lazy="dynamic.atlas[0]" v-if="dynamic && dynamic.atlas" width="100%" height="210px"/>
        <p v-if="dynamic.atlas" class="atlasSize"><i aria-hidden="true" class="fa fa-picture-o"></i> {{dynamic.atlas.length}}张</p>
      </div>
      <div class="dynamic-wrapper">
        <!-- 图片拍摄信息 -->
        <div v-if="dynamic.publishAddress" style="display: flex; justify-content: space-between;">
          <p><i class="fa fa-map-marker" aria-hidden="true"></i> {{dynamic.publishAddress}}</p>
          <!-- <p>附近500条
            <i class="fa fa-angle-right" aria-hidden="true" style="font-size: 18px;"></i>
          </p> -->
        </div>
        <!-- 内容 -->
        <p class="text" v-if="dynamic.content">
          <a href="javascript: void(0)" class="tag" v-for="(tag, index) in dynamic.tagNames" :key="index" @click.stop="toTag(dynamic.tagIds[index])">#{{tag}}#</a>
          {{dynamic.content}}
        </p>
        <!-- <p style="font-size: 12px;">拍摄于{{dynamic.publishTime}}</p> -->
        <!-- 个人信息 -->
        <div class="user">
          <img class="headImg" v-lazy="dynamic.headUrl" @click.stop="toMyInfo(dynamic.publisher)" />
          <div style="width: calc(100% - 120px);">
            <p>
              <b style="color: #000;">{{dynamic.nickname}}</b>
            </p>
            <p class="txt">{{dynamic.publishTime}} 发布</p>
          </div>
        </div>
        <!-- 点赞 -->
        <div class="star">
        </div>
        <!-- 评论 -->
        <div class="comment" v-if="dynamic.commentCount > 0 || dynamic.starSum > 0">
          <p v-if="dynamic.commentCount">全部<b>{{dynamic.commentCount}}</b>条评论</p>
          <ul class="list" v-if="commentList.length">
            <li v-for="item in commentList" :key="item.id">
              <div class="item">
                <div class="headImg" v-lazy:backgroundImage="item.headUrl" @click.stop="toMyInfo(item.userId)"></div>
                <div style="width: calc(100% - 70px)">
                  <p style="padding-top: 3px;">{{item.nickname}}</p>
                  <p style="font-size: 12px;">{{item.createAt}}</p>
                </div>
              </div>
              <div class="content">
                <p>{{item.content}}</p>
                <p class="replay" v-if="item.replyCount" @click.stop="toShowReply(item)">查看{{item.replyCount}}条回复
                  <i class="fa fa-angle-right" aria-hidden="true"></i>
                </p>
              </div>
            </li>
          </ul>
        </div>

      </div>
    </scroll>

    <div class="reply-wrapper" v-if="showReply" :style="{top: (paddingTop + 160) + 'px'}">
      <div class="head">
        评论详情
        <i class="fa fa-times" aria-hidden="true" @click.stop="showReply = false"></i>
      </div>
      <scroll class="reply-scroll"
        ref="replyScroll"
        :style="{height: replyScrollHeight + 'px'}"
        :data="replyList"
        :pullUpLoad="true"
        @pullingUp="onReplyPullingUp">
        <div class="comment">
          <div class="item">
            <div class="headImg" v-lazy:backgroundImage="currentComment.headUrl"  @click.stop="toMyInfo(currentComment.userId)"></div>
            <div>
              <p style="padding-top: 4px;">{{currentComment.nickname}}</p>
              <p style="font-size: 12px;">{{currentComment.createAt}}</p>
            </div>
          </div>
          <div class="content">
            <p>{{currentComment.content}}</p>
          </div>
        </div>
        <ul class="list" v-if="replyList.length">
          <li v-for="item in replyList" :key="item.id" @click.stop="toShowInput(1, item)">
            <div class="item">
              <div class="headImg" v-lazy:backgroundImage="item.headUrl"  @click.stop="toMyInfo(item.userId)"></div>
              <div>
                <p style="padding-top: 4px;">{{item.userName}}</p>
                <p style="font-size: 12px;">{{item.createAt}}</p>
              </div>
            </div>
            <div class="content">
              <p v-if="item.targetType == 0">{{item.comment}}</p>
              <p v-if="item.targetType == 1">回复<font @click.stop="toMyInfo(item.targetUserId)" style="color: #37c3e2">{{item.targetUserName}}</font>: {{item.comment}}</p>
            </div>
          </li>
        </ul>
      </scroll>
    </div>

    <!-- 顶部菜单 -->
    <div class="strategy-mask" v-show="showTopMenu" @click="showTopMenu = false">
      <ul ref="topMenu" class="top-menu" :style="{marginTop: paddingTop + 43 + 'px'}" @click.stop="showTopMenu = false">
        <li v-if="isMe" @click="toDelete"><i class="icon iconfont icon-delete"></i>  删除</li>
        <li @click="toReport(3, dynamic.id, dynamic.content)"><i class="icon iconfont icon-report"></i>  举报</li>
      </ul>
    </div>

    <bottom-input ref="bottomInput" v-model="showInput" @send="sendComment" :placeholder="placeholder"></bottom-input>

    <actionsheet
        v-model="showActionSheet"
        :menus="{
          reply: '回复',
          report: '举报'
        }"
        @on-click-menu="clickActionSheet"
        show-cancel>
    </actionsheet>

    <div v-transfer-dom>
      <previewer :list="selectAtlas" :options="{loop: false}" @imgLoaded="preImgLoaded" ref="previewer"></previewer>
    </div>

    <share v-model="showShare" :title="shareContent.title" :desc="shareContent.desc" :thumbUrl="shareContent.thumbUrl" :linkUrl="shareContent.linkUrl"></share>
  </div>
</template>

<script>
import VHeader from '@/components/v-header/v-header'
import Share from '@/components/share/share'
import Scroll from '@/components/scroll/scroll'
import BottomInput from '@/components/bottom-input/bottom-input'
import Previewer from '@/components/previewer/previewer'
import { Actionsheet, TransferDom } from 'vux'

import { localUser } from '@/assets/js/local'
import axios from '@/api/axiosApi'
import nativeBridge from '@/assets/js/nativeBridge'
import { isIphoneX } from '@/assets/js/brower'
import { personifyTime } from '@/assets/js/utils'
import { QINIU_PREFIX, APP_DOWNLOAD_PATH } from '@/api/config'
import defaultAvatar from '@/assets/img/default_avatar.png'
import more from '@/assets/img/icon/more.png'
import moreVert from '@/assets/img/icon/more_vert.png'
import { handleBackMixin, statusBarMixin } from '@/assets/js/mixin'

const MAX_HEIGHT = window.innerHeight * 0.85

export default {
  mixins: [handleBackMixin, statusBarMixin],
  data() {
    return {
      more,
      moreVert,
      statusBarColor: 'white',
      showTopMenu: false,
      isMe: false,
      showShare: false,
      showActionSheet: false,
      showInput: false,
      showReply: false,
      placeholder: '发布你的精彩评论...',
      userAddress: '',
      shareContent: {},
      headerStyles: {
        color: '#fff',
        background: 'rgba(255, 255, 255, 0)'
      },
      dynamic: {},
      starList: [],
      selectAtlas: [],
      commentPageNum: 1,
      commentList: [],
      replyList: [],
      currentComment: null,   // 选中的评论
      currentReply: null,    // 选中的回复
      replyType: 0,         // 回复的类型。
      allPopupModels: ['showShare', 'showTopMenu', 'showActionSheet', 'showInput', 'showReply']
    }
  },
  directives: {
    TransferDom
  },
  components: {
    VHeader, Share, Scroll, BottomInput, Actionsheet, Previewer
  },
  created() {
    this.paddingBottom = 0
    this.paddingTop = 24
    if (isIphoneX()) {
      this.paddingBottom = 20
      this.paddingTop = 34
    }
    this.imgHeight = 250
    this.replyScrollHeight = window.innerHeight

    this.userId = localUser.get('id')

    this._getDynamicDesc()
    this._viewDynamic()
    this._getStarList()
    this._getCommentList(true)
    this._init = true
    setTimeout(() => {
      // 避免直接刷新页面时，重复调用接口
      this._init = false
    }, 200)

    // 刷新一下定位
    const _self = this
    nativeBridge.getPosition(this, (arg, geo) => {
      _self.$store.commit('SET_POSITION', [parseFloat(arg.longitude), parseFloat(arg.latitude)])
      _self.userAddress = geo.formattedAddress
    })
  },
  activated () {
    if (this._init !== true) {
      this.userId = localUser.get('id')

      this._getDynamicDesc()
      this._viewDynamic()
      this._getStarList()
      this._getCommentList(true)

      // 刷新一下定位
      const _self = this
      nativeBridge.getPosition(this, (arg, geo) => {
        _self.$store.commit('SET_POSITION', [parseFloat(arg.longitude), parseFloat(arg.latitude)])
        _self.userAddress = geo.formattedAddress
      })
    }
  },
  methods: {
    _getDynamicDesc() {
      axios.get(this, '/v1/dynamic', {
        id: this.$route.params.dynamicId,
        curUserId: localUser.get('id'),
        type: 1
      }, (data) => {
        if (data == null || data.length === 0) {
          this.$vux.toast.text('该动态不存在', 'middle')
          return
        }
        let tmpHeadUrl = defaultAvatar
        if (data[0].headUrl) {
          if (data[0].headUrl.indexOf(QINIU_PREFIX) > -1) {
            tmpHeadUrl = data[0].headUrl + '-bheader'
          } else {
            tmpHeadUrl = data[0].headUrl
          }
        }
        if (data[0].tagIds) {
          data[0].tagIds = data[0].tagIds.split(';')
          data[0].tagNames = data[0].tagNames.split(';')
        }
        data[0].headUrl = tmpHeadUrl
        if (data[0].atlas) {
          const tmp = data[0].atlas.split(';')
          for (let i = 0; i < tmp.length; i++) {
            tmp[i] += '-w350'
          }
          data[0].atlas = tmp
        } else {
          data[0].atlas = []
        }
        data[0].publishTime = personifyTime(data[0].publishTime)

        const userId = localUser.get('id')
        if (userId && userId === data[0].publisher) {
          this.isMe = true
        }
        this.dynamic = data[0]
        this.preloadImg(this.dynamic.atlas[0])
      })
    },
    _viewDynamic() {
      const userId = localUser.get('id')
      if (userId != null) {
        axios.post(this, '/v1/messageRecord', {
          userId: userId,
          targetId: this.$route.params.dynamicId,
          type: 1
        }, (data) => {
        }, null, false)
      }
    },
    _getStarList() {
      const _self = this
      axios.get(this, '/v1/starMan/' + this.$route.params.dynamicId, {
        pageSize: 5
      }, (data) => {
        data.forEach(item => {
          let tmpHeadUrl = defaultAvatar
          if (item.headUrl) {
            if (item.headUrl.indexOf(QINIU_PREFIX) > -1) {
              tmpHeadUrl = item.headUrl + '-sheader'
            } else {
              tmpHeadUrl = item.headUrl
            }
          }
          item.headUrl = tmpHeadUrl
        })
        _self.starList = data
      }, null, false)
    },
    _getCommentList (isFirst) {
      const _self = this
      axios.get(this, '/v1/DynamicRecord/' + this.$route.params.dynamicId, {
        pageSize: 5,
        pageNum: _self.commentPageNum
      }, (data) => {
        if (data.length === 0) {
          if (_self.commentPageNum > 1) {
            _self.commentPageNum--
          }
          if (isFirst !== true) {
            _self.$refs.scroll.hiddenPullUpLoad()
          }
        } else {
          data.forEach(item => {
            let tmpHeadUrl = defaultAvatar
            if (item.headUrl) {
              if (item.headUrl.indexOf(QINIU_PREFIX) > -1) {
                tmpHeadUrl = item.headUrl + '-bheader'
              } else {
                tmpHeadUrl = item.headUrl
              }
            }
            item.headUrl = tmpHeadUrl
            item.createAt = personifyTime(item.createAt)
          })
          if (_self.commentPageNum <= 1) {
            _self.commentList = data
          } else {
            _self.commentList = _self.commentList.concat(data)
          }
        }
      }, null, false)
    },
    _getReplyList(isFirst) {
      const _self = this
      axios.get(this, '/v1/reply/' + this.currentComment.id, {
        pageNum: _self.replyPageNum,
        pageSize: 10
      }, (data) => {
        if (data.length === 0) {
          if (_self.replyPageNum > 1) {
            _self.replyPageNum--
          }
          if (isFirst !== true) {
            _self.$refs.replyScroll.hiddenPullUpLoad()
          }
        } else {
          data.forEach(item => {
            let tmpHeadUrl = defaultAvatar
            if (item.headUrl) {
              if (item.headUrl.indexOf(QINIU_PREFIX) > -1) {
                tmpHeadUrl = item.headUrl + '-bheader'
              } else {
                tmpHeadUrl = item.headUrl
              }
            }
            item.headUrl = tmpHeadUrl
            item.createAt = personifyTime(item.createAt)
          })
          if (_self.replyPageNum <= 1) {
            _self.replyList = data
          } else {
            _self.replyList = _self.replyList.concat(data)
          }
        }
      })
    },
    changeFollowStatus(targetUserId) {
      const userId = localUser.get('id')
      if (userId == null) {
        this.$vux.toast.text('请先登录！', 'middle')
        return
      }
      if (this.sendRequest) {
        return
      }
      if (userId === targetUserId) {
        this.$vux.toast.text('自己不能关注自己！', 'middle')
        return
      }
      const valid = this.dynamic.follower === 'NO' ? 1 : 0
      this.dynamic.follower = this.dynamic.follower === 'NO' ? 'YES' : 'NO'
      this.sendRequest = true
      const _self = this
      axios.post(this, `/v1/follow/${userId}/${targetUserId}/${valid}`, null, (data) => {
        _self.sendRequest = false
        if (valid) {
          this.$vux.toast.text('加好友请求发送成功', 'middle')
          axios.post(this, '/v1/pushAlias', {
            userId: targetUserId,
            content: `${localUser.get('nickname')}请求加你为好友，赶快去看一看吧~`,
            linkUrl: `/user/newfriends`
          })
        }
      }, null, false)
    },
    updateMessage(dynamicId, value) {
      const userId = localUser.get('id')
      // if (userId == null) {
      //   this.$vux.toast.text('请先登录！', 'middle')
      //   return
      // }
      if (value) {
        // 禁止取消
        this.$vux.toast.text('你已经点赞过了~', 'middle')
        return
      }
      if (this.sendRequest) {
        return
      }
      let params = {
        userId: userId,
        targetId: dynamicId,
        type: 1,
        starType: value ? 0 : 1
      }
      const _self = this
      this.sendRequest = true
      axios.post(this, '/v1/messageRecord', params, (data) => {
        _self.sendRequest = false
        if (value) {
          _self.dynamic.star = 0
          _self.dynamic.starSum--
        } else {
          _self.dynamic.star = 1
          _self.dynamic.starSum++
        }
        _self._getStarList()
      }, () => {
        _self.sendRequest = false
      }, false)
    },
    toOpenMenu () {
      this.showTopMenu = true
      this.$refs.topMenu.style.height = 0

      setTimeout(() => {
        let height = 0
        for (let i = 0; i < this.$refs.topMenu.children.length; i++) {
          const element = this.$refs.topMenu.children[i]
          height += element.offsetHeight
        }
        this.$refs.topMenu.style.height = height + 'px'
      }, 20)
    },
    toDelete () {
      const _self = this
      this.$vux.confirm.show({
        title: `确定要删除该动态吗？`,
        confirmText: '确定',
        cancelText: '取消',
        onCancel () {
        },
        onConfirm () {
          axios.delete(_self, '/v1/dynamic/' + _self.$route.params.dynamicId, null, () => {
            _self.$vux.toast.text('删除成功', 'middle')
            _self.$router.go(-1)
          })
        }
      })
    },
    toReport (type, id, title) {
      const userId = localUser.get('id')
      if (userId == null) {
        this.$vux.toast.text('请先登录！', 'middle')
        return
      }
      this.$router.push({
        path: `/commonReport/${type}/${id}`,
        query: {
          title: title
        }
      })
    },
    toTag (tagId) {
      this.$router.push(`/meiTu/tagDynamic/${tagId}`)
    },
    scrollWrapper(position) {
      if (position.y <= -(this.imgHeight - this.paddingTop - 40)) {
        this.headerStyles = {
          color: '#000',
          background: 'rgba(255, 255, 255, 1)'
        }
        this.statusBarColor = 'black'
      } else {
        this.headerStyles = {
          color: '#fff',
          background: `rgba(255, 255, 255, ${Math.abs(position.y / this.imgHeight)})`
        }
        if (Math.abs(position.y / this.imgHeight) > 0.88) {
          this.headerStyles.color = '#000'
          this.statusBarColor = 'black'
        } else {
          this.statusBarColor = 'white'
        }
      }
    },
    preloadImg(src) {
      const imgObj = new Image()
      const _self = this
      imgObj.addEventListener('load', (e) => {
        if (e.type === 'load') {
          _self.imgHeight = imgObj.height
          if (imgObj.height > imgObj.width) {
            // 高做最大边，宽度等比例缩放
            if (imgObj.height >= MAX_HEIGHT) {
              _self.imgHeight = MAX_HEIGHT
              _self.$refs.topImg.style.height = MAX_HEIGHT + 'px'
              _self.$refs.topImg.style.width = imgObj.width * (MAX_HEIGHT / imgObj.height) + 'px'
            }
          } else {
            // 宽做最大边，高度等比例缩放
            if (imgObj.width >= window.innerWidth) {
              _self.$refs.topImg.style.width = window.innerWidth + 'px'
              _self.$refs.topImg.style.height = imgObj.height * (window.innerWidth / imgObj.width) + 'px'
              _self.imgHeight = imgObj.height * (window.innerWidth / imgObj.width)
            } else {
              _self.$refs.topImg.style.marginTop = '60px'
              _self.$refs.topImg.style.transform = 'translateY(-50%)'
            }
          }
          _self.$refs.topImg.parentElement.style.backgroundColor = '#000'
        }
      })
      imgObj.src = src
    },
    toShowActionSheet (target) {
      this.currentComment = target
      this.showActionSheet = true
    },
    clickActionSheet(item) {
      if (item === 'reply') {
        this.toShowInput(0)
      } else if (item === 'report') {
        this.toReport(103, item.id, this.currentComment.content)
      }
    },
    onReplyPullingUp() {
      this.replyPageNum++
      this._getReplyList()
    },
    toShowInput(type, target) {
      if (localUser.get('id') == null) {
        this.$vux.toast.text('请先登录', 'middle')
        return
      }
      this.showInput = true
      this.replyType = type
      if (type === 0) {
        // 评论
        this.placeholder = '回复 ' + this.currentComment.nickname + ' 的评论'
      } else if (type === 1) {
        // 回复
        this.currentReply = target
        this.placeholder = '回复 ' + target.userName
      } else {
        this.currentComment = null
        this.currentReply = null
        this.placeholder = '发布你的精彩评论...'
      }
    },
    toShowReply(item) {
      this.currentComment = item
      this.replyPageNum = 1
      this._getReplyList(true)
      this.showReply = true
    },
    sendComment (val) {
      const t = val
      if (t.replace(/\s/g, '') === '') {
        this.$vux.toast.text('消息不能为空', 'middle')
        return
      }
      const user = localUser.get()
      const _self = this
      if (this.replyType == null) {
        // 评论
        axios.post(this, '/v1/DynamicRecord', {
          dynamicId: _self.$route.params.dynamicId,
          userId: user.id,
          content: val
        }, (data) => {
          data.createAt = '刚刚'
          data.nickname = user.nickname
          data.headUrl = user.headUrl || defaultAvatar
          data.replyCount = 0
          _self.commentList.splice(0, 0, data)

          _self.showInput = false
          _self.dynamic.commentCount++
          _self.$refs.bottomInput.setContent('')
          _self.$vux.toast.text('评论成功', 'middle')
          axios.post(_self, '/v1/pushAlias', {
            userId: _self.dynamic.publisher,
            content: `${localUser.get('nickname')}评论了你的动态：${val}`,
            linkUrl: `/meiTu/dynamicDesc/${_self.$route.params.dynamicId}`
          })
        })
      } else {
        // 回复
        let params = {
          replyType: 2,
          targetId: _self.dynamic.id,
          targetType: _self.replyType,
          userId: user.id,
          comment: val,
          targetCommentId: _self.currentComment.id
        }
        if (_self.currentComment != null) {
          // 回复 评论
          params.targetUserId = _self.currentComment.userId
        } else if (_self.currentReply != null) {
          // 回复 回复
          params.targetUserId = _self.currentReply.userId
        }
        // 经纬度
        const position = this.$store.getters.position
        if (position.length === 2) {
          params.longitude = position[0]
          params.latitude = position[1]
          params.commentLocation = _self.userAddress
        }
        axios.post(this, '/v1/reply/', params, (data) => {
          _self.showInput = false
          _self.dynamic.commentCount++
          _self.$refs.bottomInput.setContent('')
          _self.$vux.toast.text('回复成功', 'middle')
          for (let i = 0; i < _self.commentList.length; i++) {
            const item = _self.commentList[i]
            if (item.id === _self.currentComment.id) {
              item.replyCount++
            }
          }
          data.createAt = '刚刚'
          data.userName = user.nickname
          if (_self.currentReply) {
            data.targetUserName = _self.currentReply.userName
          }
          data.headUrl = user.headUrl || defaultAvatar
          if (_self.currentReply != null) {
            _self.replyList.splice(0, 0, data)
          }

          axios.post(_self, '/v1/pushAlias', {
            userId: params.targetUserId,
            content: `${localUser.get('nickname')}回复了你：${val}`,
            linkUrl: `/meiTu/dynamicDesc/${_self.$route.params.dynamicId}`
          })
        })
      }
    },
    toMyInfo(userId) {
      this.$router.push(`/user/archives/${userId}`)
    },
    toShare() {
      this.showShare = true
      this.shareContent = {
        title: (localUser.get('nickname') || '小嗨') + ' 分享了 ' + this.dynamic.nickname + ' 发的动态',
        desc: this.dynamic.content,
        thumbUrl: this.dynamic.atlas[0],
        linkUrl: APP_DOWNLOAD_PATH
      }
    },
    previewImg (imgs, index) {
      // 预览图片
      this.$vux.loading.show({
        text: '加载中...',
        position: 'absolute'
      })
      let temp = []
      imgs.forEach((img, i) => {
        temp.push({
          src: img
        })
      })
      this.selectAtlas = temp
      this.$nextTick(() => {
        this.$refs.previewer.show(index)
      })
    },
    preImgLoaded () {
      this.$vux.loading.hide()
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~@/assets/css/variable.styl';

[v-cloak] {
  display: none;
}
.dynamic-desc-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #fff;
  z-index: 201;

  .main {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    height: 100%;
    .imgWrapper {
      text-align: center;
      margin: 0 auto;
      min-height: 120px;
      line-height: 1;
      font-size: 0;
      position: relative;
      .atlasSize {
        position: absolute;
        right: 0;
        top: 100px;
        padding: 5px 10px;
        font-size: 12px;
        line-height: 1rem;
        color: #fff;
        border-top-left-radius: 15px;
        border-bottom-left-radius: 15px;
        background: rgba(0,0,0,0.5);
      }
    }

    .dynamic-wrapper {
      padding: 15px;
      background: #fff;

      .text {
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 4;
        -webkit-box-orient: vertical;
        margin: 15px 0;

        .tag {
          color: #2b68c5;
          margin-right: 5px;

          &:hover, &:focus {
            background: $color-border;
            border-radius: 3px;
          }
        }
      }

      .user {
        display: flex;
        padding: 12px 0;
        align-items: center;

        .headImg {
          min-width: 48px;
          width: 48px;
          height: 48px;
          border-radius: 50%;
          margin-right: 12px;
        }

        .litter-button {
          padding: 0 11px;
          width: fit-content;
          height: 18px;
          line-height: 18px;
          border: 1px solid $color-theme;
          border-radius: 3px;
          color: $color-theme;
          font-size: $font-size-small;
          float: right;
        }

        .txt {
          font-size: 12px;
          color: $color-text-2;
          line-height: 1.4rem;
          display: flex;
          justify-content: space-between;
          line-height: 1;
        }
      }

      .star {
        padding: 5px 0;
        border-top: 1px solid $color-border;
        display: flex;
        line-height: 1;
        align-items: center;
        text-align: right;
        justify-content: space-between;

        .imgs {
          display: flex;
          margin-right: 7px;

          img {
            width: 32px;
            height: 32px;
            min-width: 32px;
            border-radius: 50%;
            margin-right: 5px;
          }

          .more {
            width: 32px;
            height: 32px;
            min-width: 32px;
            border-radius: 50%;
            margin-right: 5px;
            background: $color-background;
          }
        }

        .star-btn {
          text-align: center;
          border: 1px solid $color-border;
          color: $color-text-2;
          line-height: 1;
          padding: 4px 7px;
          border-radius: 13px;
          font-size: $font-szie-desc;
          box-shadow: 0 0 8px $color-border;

          i {
            margin-left: 3px;
          }
        }

        .active {
          color: $color-theme;
        }
      }

      .comment {
        padding: 12px 0;
        .list {
          li {
            padding: 5px 0;

            .item {
              display: flex;
              align-items: center;
              justify-content: flex-start;
              line-height: 1.2;
              color: #666;
              font-size: $font-size-desc;
              overflow: hidden;

              .headImg {
                width: 32px;
                min-width: 32px;
                height: 32px;
                border-radius: 50%;
                background-repeat: no-repeat;
                background-size: cover;
                margin-right: 12px;
              }
            }

            .content {
              color: $color-text-1;
              padding-top: 3px;
              padding-bottom: 7px;
              margin-left: 43px;
              font-size: $font-size-desc;
              border-bottom: 1px solid #f0f0f0;
            }

            .replay {
              background-color: $color-background;
              border-radius: 3px;
              position: relative;
              padding: 9px;
              margin-top: 8px;
              line-height: 1;
              color: $color-theme;
              font-size: $font-size-small;

              &:before {
                content: ' ';
                position: absolute;
                left: 9px;
                bottom: 100%;
                border: 6px solid transparent;
                border-bottom-color: $color-background;
              }
            }
          }
        }
      }
    }
  }

  .bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 103;
    padding: 6px 12px;
    text-align: center;
    background: #fff;
    box-shadow: 0 0 10px #e6e6e6;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid $color-border;
    line-height: 1;
    p {
      color: #666;
      border-radius: 3px;
      padding: 10px 15px;
      width: 60%;
      line-height: 1;
      background: $color-background;
      overflow: hidden;
    }

    .star-btn {
      text-align: center;
      font-size: 21px;
      color: $color-text-2;
      padding: 1px 7px;

      i {
        margin-left: 5px;
      }
    }

    .active {
      color: $color-theme;
    }
  }

  .reply-wrapper {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    color: #333;
    z-index: 201;
    box-shadow 4px -4px 2px 2px #999
    .head {
      padding: 9px 12px;
      text-align: center;
      position: relative;
      i {
        position: absolute;
        padding: 6px;
        font-size: 18px;
        top: 4px;
        right: 12px;
      }
    }

    .reply-scroll {
      .comment {
        padding: 0 12px;
        .item {
          display: flex;
          align-content: center;
          line-height: 1.2;
          color: #666;
          font-size: $font-size-desc;
          .headImg {
            width: 36px;
            min-width: 36px;
            height: 36px;
            border-radius: 50%;
            background-repeat: no-repeat;
            background-size: cover;
            margin-right: 7px;;
          }
        }
        .content {
          color: $color-text-1;
          padding-top: 3px;
          padding-bottom: 7px;
          margin-left: 43px;
          font-size: $font-size-desc;
        }
      }
      .list {
        padding: 0 12px;
        background: $color-background;
        li {
          padding: 5px 0;
          &:last-child .content{
            border: none;
          }
          .item {
            display: flex;
            align-content: center;
            line-height: 1.2;
            color: #666;
            font-size: $font-size-desc;
            .headImg {
              width: 36px;
              min-width: 36px;
              height: 36px;
              border-radius: 50%;
              background-repeat: no-repeat;
              background-size: cover;
              margin-right: 7px;;
            }
          }
          .content {
            color: $color-text-1;
            padding-top: 3px;
            padding-bottom: 7px;
            margin-left: 43px;
            font-size: $font-size-desc;
            border-bottom: 1px solid #e2dfdf;
          }
        }
      }
    }

    .bottom {
      padding: 6px 12px;
      text-align: center;
      background: $color-background;
      display: flex;
      justify-content: center;
      border-top: 1px solid $color-border;
      overflow: hidden;
      p {
        color: #666;
        border-radius: 23px;
        padding: 7px 15px;
        width: 75%;
        box-shadow: 0 0 6px $color-border;
        background: #fff;
        overflow: hidden;
      }
    }
  }

  .right {
    line-height: 25px;
    display: flex;
    i {
      font-size: 18px;
    }
    .more {
      font-size: 21px;
      padding-left: 12px;
      padding-right: 3px;
      border-left: 1px solid #dfdfdf;
    }
  }
  .strategy-mask {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0px;
    z-index: 105;
    display: flex;
    justify-content: flex-end;
    .top-menu {
      background: #fff;
      padding: 12px 0;
      width: 85px;
      margin-right: 15px;
      border-radius: 3px;
      box-shadow: 0 0 15px rgba(141, 141, 141, 0.6);
      height: fit-content;
      transition: height .2s;
      li {
        padding: 0 9px;
        height: 32px;
        line-height: 32px;
        border-bottom: 1px solid #f8f8f8;
        &:last-child {
          border-bottom: none;
        }
      }
    }
  }
}
</style>
